<template>
  <div class="home">
    <van-nav-bar
        :title="stock"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
    />
    <div class="fund-line">
      <div id="main" class="fund-line-inner"></div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "Fund",
  data() {
    return {
      stock: '000568',
      name: '泸州老窖',
      market: 'sz',
      barChartInstance: null,
      barDateList: [],
      barFundList: [],
      innerBarTableData: []
    }
  },
  mounted() {
    if (typeof (this.$route.params.stock) == 'undefined') {
      this.stock = '000568'
    } else {
      this.stock = this.$route.params.stock
    }
    if (typeof (this.$route.params.name) == 'undefined') {
      this.name = '泸州老窖'
    } else {
      this.name = this.$route.params.name
    }
    const tempCode = String(this.stock)
    if (tempCode.startsWith("6") || tempCode.startsWith("9")) {
      this.market = 'sh'
    } else {
      this.market = 'sz'
    }
    this.initBarCharts()
    this.getBarData()
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    initBarCharts() {
      this.$nextTick(() => {
        this.barChartInstance = this.$echarts.init(document.getElementById('main'));
        this.barChartInstance.setOption(
            {
              title: {
                text: this.name,
                textStyle: {
                  color: 'black',
                  fontFamily: 'Arial',
                  fontStyle: 'normal',
                  fontWeight: 'normal',
                },
                x: 'center',
                y: 'bottom'
              },
              xAxis: {
                type: 'category',
                boundaryGap: false,
                axisLabel: {
                  color: 'black'
                },
                axisLine: {
                  show: false
                }
              },
              yAxis: {
                type: 'value',
                axisLabel: {
                  color: 'black'
                },
                splitLine: {
                  lineStyle: {
                    color: 'black'
                  }
                }
              },
              tooltip: {
                trigger: 'axis'
              },
              grid: {
                top: '3%',
                left: '1%',
                right: '3%',
                containLabel: true
              },
              series: [
                {
                  type: 'line',
                  showBackground: true,
                  backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)'
                  }
                }
              ]
            }
        )
      })
    },
    getBarData() {
      this.barDateList = []
      this.barFundList = []
      this.innerBarTableData = []

      axios.get('http://alfred168.cn:1067/akshare/getIndividualFundFlow', {
        params: {
          stock: this.stock,
          market: this.market
        }
      }).then(res => {
        if (res == null) {
          console.log(res)
        } else {
          this.innerBarTableData = JSON.parse(String(res.data))
          this.innerBarTableData.forEach((item) => {
            this.barDateList.push(item['日期'])
          })
          const tempArray = []
          this.innerBarTableData.forEach((item) => {
            tempArray.push(Number(Math.floor(item['主力净流入-净额']) / 10000).toFixed(2))
          })
          for (let i = 0; i < tempArray.length; i++) {
            if (i === 0) {
              this.barFundList.push(tempArray[i])
            } else {
              let tempSum = 0;
              for (let j = 0; j <= i; j++) {
                tempSum += Number(tempArray[j])
              }
              this.barFundList.push(Number(tempSum).toFixed(2))
            }
          }
          this.barChartInstance.setOption(
              {
                xAxis: {
                  data: this.barDateList
                },
                series: [
                  {
                    data: this.barFundList
                  }
                ]
              }
          )
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.fund-line {
  top: 150px;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 800px;
  padding: 25px 25px 0;
  box-sizing: border-box;

  .fund-line-inner {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, .05);
  }
}
</style>

<style lang="scss" scoped>
.home {
  position: relative;
  height: 100%;
}
</style>
